<template>
	<view class="reserve_container">
		<!-- 列表区域 -->
		<view class="list">
			<view class="list_detail">
				<view><text>{{mealData[0].com_proName}}</text></view>
				<view class="count">
					<text>￥{{mealData[0].com_presentPrice}}</text>
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
			<view class="list_detail" v-for="item in addData" :key="item.phy_id">
				<view><text>{{item.phy_projectName}}</text></view>
				<view class="count">
					<text>￥{{item.phy_salePrice}}</text>
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>
			<view class="list_detail">
				<view class="red"><text>合计</text></view>
				<view class="count red">
					<text>￥{{addPrice+mealData[0].com_presentPrice}}</text>
					<text class="iconfont icon-gengduo"></text>
				</view>
			</view>

		</view>
		<!-- 选择部分区域 -->
		<view class="person_detail">
			<view class="list">
				<view class="list_detail" @click="ins.insShow=true">
					<view><text>体检机构</text></view>
					<u-select v-model="ins.insShow" :list="ins.insList" @confirm="insChange"></u-select>
					<view class="count address">
						<text>{{orgSel.label || "请选择"}}</text>
						<text class="iconfont icon-gengduo">></text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list_detail" @click="choicePerson">
					<view><text>体检人</text></view>
					<view class="count">
						<text>{{user.user_name}}</text>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list_detail" @click="calendar.calendarShow=true">
					<view><text>体检日期</text></view>
					<u-calendar v-model="calendar.calendarShow" :mode="calendar.calendarModel" @change="calendarChange">
						<!-- 日期组件的小title -->
						<view slot="tooltip">
							<view class="title">
								选择体检时间
							</view>
						</view>
					</u-calendar>
					<view class="count">
						<text>{{dateSel|| "未选择"}}</text>
						<text class="iconfont icon-gengduo">></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="sure_btn">
			<view @click="sure"><text>立即预定</text></view>
			<!-- <navigator @click="sure"><text>立即预定</text></navigator> -->
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(option) {
			if (option.sel) {
				this.optionSel = option.sel;
				this.$http({ //获取体检加项的内容
					url: "/rSelectAdd",
					data: {
						productId: option.productId,
						sel: option.sel
					}
				}).then((res) => {
					this.addData = res.data.data;
					this.mealData = res.data.res;
				})
			} else {
				this.$http({ //获取体检加项的内容
					url: "/getMeal",
					data: {
						productId: option.productId,
					}
				}).then((res) => {
					this.mealData = res.data;
				})
			}

		},
		mounted() {
			//累加加项的金额
			let {
				phy_salePrice
			} = this.addData
			this.addPrice = this.addData.reduce((pre_price, item) => {
				return pre_price + parseInt(item.phy_salePrice);
			}, 0)

			//查询体检机构
			this.$http({ //获取体检加项的内容
				url: "/getOrg",
			}).then((res) => {
				res.data.map(item=>{
					this.ins.insList.push({value:item.org_id,label:item.org_name});
				})
			})

		},
		data() {
			return {
				//体检加项的数据
				addData: [],
				//套餐数据
				mealData: [],
				//总价格
				addPrice: 0,
				// 日期选择
				calendar: {
					calendarShow: false, //时间日期是否显示
					calendarModel: 'date', //日历模式 date选择单个日期，range选择日期范围,

				},
				// 体检中心选择
				ins: {
					insShow: false, //体检机构选择
					insList: [],
				},
				//体检机构名称
				orgSel:{},
				//体检日期
				dateSel:'',
				//选中的加项id
				optionSel:[],
				//体检人
				user:{user_name:'小鱼',user_id:300}
			}
		},
		methods: {
			// 立即预定的回调
			sure() {
				let {addPrice,optionSel,orgSel,dateSel,user,mealData} = this
				console.log(optionSel)
				uni.navigateTo({
					url: `/pages/FinishPay/FinishPay?price=${addPrice+mealData[0].com_presentPrice}&&optionSel=${optionSel}&&orgSel=${orgSel.value}&&userId=${user.user_id}&&productId=${mealData[0].productId}&&addPrice=${addPrice}&&date=${dateSel}`
				})
			},
			// 选择体检人
			choicePerson() {
				// uni.navigateTo({
				// 	url: "/pages/ChoicePerson/ChoicePerson"
				// })
			},
			// 选择日历的回调事件
			calendarChange(e) {
				this.dateSel = `${e.year}-${e.month}-${e.day}`
			},
			//选择机构中心的回调事件
			insChange(e) {
				this.orgSel = e[0];
				console.log(this.orgSel.label)
			}
		}
	}
</script>

<style lang="scss">
	.reserve_container {
		.list {
			background-color: rgba(221, 221, 221, 0.1);
			margin-top: 40rpx;

			.list_detail {
				.title {
					text-align: center;
					padding: 20rpx 0 0 0;
				}

				.red {
					color: red;
				}

				display: flex;
				justify-content: space-between;
				padding:30rpx 20rpx;
				border-bottom: 1px solid #ccc;
				color: #464646;

				.count {
					text {
						margin: 0 8rpx;
					}
				}
			}
		}

		.person_detail {
			margin-top: 50rpx;
			background-color: rgba(221, 221, 221, 0.1);

			.list {
				margin-top: 10rpx;
			}

			.address {
				font-size: 26rpx;
			}
		}

		.sure_btn {
			width: 750rpx;
			height: 96rpx;
			background-color: #59b58d;
			color: white;
			font-size: 18px;
			text-align: center;
			position: fixed;
			bottom: 0;
			line-height: 96rpx;
		}

	}
</style>
